import react, { useEffect, useState } from 'react'
import { Badge, Dropdown, Space, Table, Col, Row, Input } from 'antd';
const { Search } = Input;
import './index.less'
import axios from 'axios';

const App = () => {
    // expandable 是展开功能的配置  expandedRowRender 额外的展开行
    const expandedRowRender = (record, index) => {

        console.log(record, index);

        const columns = [
            {
                title: '提问的时间',
                dataIndex: 'Time',
                key: 'Time',
            },
            {
                title: '面试题',
                dataIndex: 'Title',
                key: 'Title',
                // 超出自动进行省略
                ellipsis: true,
            },
            {
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                render: () => (
                    <Space size="middle">
                        <a>删除</a>
                    </Space>
                ),
            },
        ];

        // 模拟数据
        const data = record.title

        return <Table rowKey="_id" columns={columns} dataSource={data} pagination={false} />;
    };

    // 最外层大表格的columns
    const columnsData = [
        {
            title: '学生姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '提问的次数',
            dataIndex: 'number',
            key: 'number',
            // 排序
            defaultSortOrder: 'descend',
            sorter: (a, b) => a.number - b.number,
        },
        {
            title: '操作',
            key: 'operation',
            render: () => <a>Publish</a>,
        },
    ];
    // 最外层大表格数据 (模拟数据)
    // const datas = [
    //     {
    //         key: '1',
    //         name: 'John Brown',
    //         platform: 32,
    //         address: 'New York No. 1 Lake Park',
    //     },
    //     {
    //         key: '2',
    //         name: 'Jim Green',
    //         platform: 42,
    //         address: 'London No. 1 Lake Park',
    //     },
    //     {
    //         key: '3',
    //         name: 'Joe Black',
    //         platform: 32,
    //         address: 'Sydney No. 1 Lake Park',
    //     },
    //     {
    //         key: '4',
    //         name: 'Jim Red',
    //         platform: 32,
    //         address: 'London No. 2 Lake Park',
    //     },
    // ];

    const [datas, setDatas] = useState([])


    // 搜索框
    const onSearch = (value: any) => console.log(value);

    const getDatas = () => {
        axios.get("/api/student/title").then(res => {
            console.log(res.data);
            setDatas(res.data)
        })
    }
    // 连接后端
    useEffect(() => {
        getDatas()
    }, [])


    return (
        <div className='home'>
            <div className="home_top">
                <Row>
                    <Col span={8}>
                        <Search placeholder="请按照姓名进行搜索" onSearch={onSearch} enterButton />
                    </Col>
                    <Col span={8}>
                        <Search placeholder="请按照面试题进行搜索" onSearch={onSearch} enterButton />
                    </Col>
                    <Col span={8}></Col>
                </Row>
            </div>
            {/* table表格 */}
            <Table
                columns={columnsData}
                expandable={{
                    expandedRowRender,
                    defaultExpandedRowKeys: ['0'],
                }}
                // dataSource={datas}
                dataSource={datas.data}
                size="middle"
                rowKey="_id"
                pagination={{
                    pageSize: "4"
                }}
            />

        </div>
    );
};
export default App;